<template>
  <detailsLayout leftTitle="卡口详情" class="page-cell">
 <!--  ccc
    <div class="page-cell">  -->
      <ul class="target-car-list">
        <cardBlock class="car-item" :imgUrl="carBase.img">
          <div slot="name" class="card-name">
            <strong class="name">{{carData.cph}}</strong>
            <span class="tips">{{carBase.tag}}</span>
          </div> 
          <div class="info-grid " slot="data">
            <div class="grid-item align-left">
              <em>车辆所有人</em><span>{{carBase.onwer}}</span>
            </div>
            <div class="grid-item align-left">
              <em>身份证号</em><span v-init-tooltips="{
                  tableName: carData.tableName,
                  systemid: carData.systemid,
                  bsh: carBase.id,
                  bshlx: '001',
                  dalx: 'CL'
                }">{{carBase.id}}</span>
            </div>
            <div class="grid-item align-left">
              <em>车辆品牌</em><span>{{carBase.carName}}</span>
            </div>
            <div class="grid-item align-left">  
              <em>卡口</em>
              <span>{{carData.kkmc}}</span>
            </div>
            <div class="grid-item align-left">  
              <em>经过时间</em>
              <span>{{carData.time}}</span>
            </div>
          </div>
        </cardBlock>
      </ul>

      <detailsGroup title="以下共有4辆同卡口车辆" > 
        <ul class="same-car-list">
          <cardBlock class="car-item" :imgUrl="item.xp" v-for="(item,index) in carData.tkkArr" :key="index">
            <div slot="name" class="card-name">
              <strong class="name">{{item.cph}}</strong>
              <span class="tips">{{item.clbs}}</span>
            </div> 
            <div class="info-grid " slot="data">
              <div class="grid-item align-left">
                <em>车辆所有人</em><span>{{item.clsyr}}</span>
              </div>
              <div class="grid-item align-left">
                <em>身份证号</em><span v-init-tooltips="{
                  tableName: carData.tableName,
                  systemid: carData.systemid,
                  bsh: item.sfzh,
                  bshlx: '001',
                  dalx: 'CL'
                }">{{item.sfzh}}</span>
              </div>
              <div class="grid-item align-left">
                <em>车辆品牌</em><span>{{item.clpp}}</span>
              </div>
              <div class="grid-item align-left">  
                <em>比中次数</em>
                <span style="color:red">{{item.bzcs}}</span>
              </div>
              <div class="grid-item align-left">  
                <em>经过时间</em>
                <span>{{item.time}}</span>
              </div>
            </div>
          </cardBlock>
        </ul>
      </detailsGroup>
    
  </detailsLayout>
</template>

<script>
import detailsLayout from '../../components/details-layout'
import detailsGroup from '../../components/details-group'
import cardBlock from '../../components/card-block'
import { mapState } from 'vuex'
// import {BASE64_TYPE} from '@/config'

export default {
  name: 'subPageCar',
  props: {
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState('personStore', {
      carData: 'carData',
      carImg: 'carImg',
      carBase: 'carBase'
    })
  },
  components: {
    detailsLayout, detailsGroup, cardBlock
  },
  filters: {
  },
  methods: {
  },
  mounted() {
  },
  created() {
    // console.log(this.carData)
    // console.log(this.carBase)
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
@import "../../style/public";
.clearfix {
  @include clearfix  
}
/*div,ul,li,h1,h2,h3,h4{
  box-sizing:border-box;
}
p,ul,li{
  margin:0;
  padding:0;
}*/
.page-cell {
  font-size: 1rem;
  // line-height: 1.4;
  margin:0 auto;
  max-width:640px;
}
.target-car-list{
  padding: 0 3%;
  background:#FBFBFB;
}
.same-car-list{
  padding:0;
}
.car-item{
  .card-name{ 
    strong.name{ 
      font-size: 1.1rem;
      vertical-align: middle;
    }
    span{ 
      display:inline-block;
      font-size: .5rem; 
      padding: 0 .3rem;
      color: #fff;
      border-radius: .2rem;
      vertical-align: middle;
      background: #ff6600;
    }
  }
}
</style>
